<template>
  <el-table
    class="car-list-container"
    border fit highlight-current-row
    :data="carList">
    <el-table-column v-for="(col, colIndex) in tableCols"
                     :type="col.type"
                     :index="col.index"
                     :key="col.prop"
                     :prop="col.prop"
                     :label="col.label"
                     :width="col.width">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
        <el-button @click="del(scope.row)" type="text" size="small" style="color: red">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
    export default {
        name: 'CarList',
        data() {
            return {
              tableCols:[
                // 序号
                {type: 'index', index:1},
                // 车牌号
                {prop:'carno', label:'车牌号'},
                // 品牌型号
                {prop:'model', label:'品牌型号'},
                // 登记日期
                {prop:'registerDate', label:'登记日期'},
                // 车辆价值
                {prop:'carno', label:'车辆价值'},            // TODO 未找到数据库对应字段
                // 车主
                {prop:'carOwner', label:'车主'},
                // 常用驾驶员
                {prop:'carno', label:'常用驾驶员'},          // TODO 未找到数据库对应字段
                // 操作
              ]
            }
        },
      computed:{
        carList(){
          return this.$store.state.carList;
        }
      },
      methods:{
          edit(row){
            this.$emit('edit',row)
          },
        del(row){
            this.$emit('del', row)
        }
      }
    }
</script>

<style lang="stylus" scoped>
  .car-list-container
    margin-top: 15px
</style>
